<template>
	<view>
	<view class="bg">
		<view class="info row-h-center">
			<image src="/static/images/my_face.png" class="avater"></image>
			<view class="col" style="margin-left: 24rpx;">
				<view class="name">张三</view>
				<view class="row-h-center" style="margin-top: 10rpx;">
					<image src="/static/images/mobile.png" class="mobile-img"></image>
					<view class="mobile">11111111</view>
				</view>
			</view>
		</view>
	</view>
	<view class="count">
		<view class="count-top row-between">
			<view class="row-h-center" style="margin-left: 20rpx;margin-top: -20rpx;">
				<image style="width: 32rpx;height: 32rpx;" src="/static/images/shop_count.png"></image>
				<view class="count-title">商铺数据统计</view>
			</view>
			<view class="count-rec row-center" style="margin-top: 12rpx;">
				立即推荐
			</view>
		</view>
		
		<view class="count-item row" style="margin-top: -20rpx;">
			<view class="col" style="width: 50%;">
				<view class="count-item-text">2000</view>
				<view class="count-item-key">已认证数量</view>
			</view>
			<view class="col" style="width: 50%;">
				<view class="count-item-text2">2000</view>
				<view class="count-item-key">已缴费金额</view>
			</view>
			
		</view>
	</view>
	
	<view class="count">
		<view class="count-top row-between" style="background-color: #3B60D3;">
			<view class="row-h-center" style="margin-left: 20rpx;margin-top: -20rpx;">
				<image style="width: 32rpx;height: 32rpx;" src="/static/images/jiesuanguanli.png"></image>
				<view class="count-title">结算管理</view>
			</view>
		</view>
		
		<view class="count-item col" style="margin-top: -20rpx;">
			<view class="count-item-key">
				已结算金额
			</view>
			<view class="count-item-text2" style="margin-top: 10rpx;">
				2000
			</view>
			<view class="count-item-key">可提现金额<span class="count-price">800.00</span></view>
		</view>
		
		<view class="line">
		</view>
		<view class="row" style="margin-top: 20rpx;">
			<view class="cal-item row-center" @click="goDetail">
				<view class="cal-text">结算明细</view>
				<image src="/static/images/arrow_right_small.png" class="cal-arrow"></image>
			</view>
			<view class="cal-item row-center">
				<view class="cal-text">提现明细</view>
				<image src="/static/images/arrow_right_small.png" class="cal-arrow"></image>
			</view>
			<view class="cal-item2 row-center"  @click="goWithdraw">
				<view class="cal-text2">立即提现</view>
				<image src="/static/images/arrow_right_small.png" class="cal-arrow"></image>
			</view>
		</view>
		<view style="height: 20rpx;"></view>
	</view>
	
	
	<view class="row-between-center manage">
		<view class="manage-item col-center">
			<image src="/static/images/my_1.png" class="manage-img"></image>
			<view class="manage-text">员工管理</view>
		</view>
		
		<view class="manage-item col-center" @click="goOperate">
			<image src="/static/images/my_2.png" class="manage-img"></image>
			<view class="manage-text">运营商管理</view>
		</view>
		<view class="manage-item col-center" @click="goFeedBack">
			<image src="/static/images/my_3.png" class="manage-img"></image>
			<view class="manage-text">意见反馈</view>
		</view>
	</view>
	
	<view class="other">
		<view class="row-between-center other-item" >
			<view class="row" style="margin-left: 36rpx;">
				<image src="/static/images/yihupao.png" class="other-icon"></image>
				<view class="other-text">已互抛橄榄枝的商家</view>
			</view>
			<image src="/static/images/arrow_right.png" class="arrow"></image>
		</view>
		<view class="row-between-center other-item" @click="goBills">
			<view class="row" style="margin-left: 36rpx;">
				<image src="/static/images/yinhangzhanghao.png" class="other-icon"></image>
				<view class="other-text">设置提现银行账号</view>
			</view>
			<image src="/static/images/arrow_right.png" class="arrow"></image>
		</view>
	<view class="row-between-center other-item" >
		<view class="row" style="margin-left: 36rpx;">
			<image src="/static/images/my_4.png" class="other-icon"></image>
			<view class="other-text">联系平台客服</view>
		</view>
		<image src="/static/images/arrow_right.png" class="arrow"></image>
	</view>
	
	<view class="row-between-center other-item" >
		<view class="row" style="margin-left: 36rpx;">
			<image src="/static/images/my_5.png" class="other-icon"></image>
			<view class="other-text">切换身份</view>
		</view>
		<image src="/static/images/arrow_right.png" class="arrow"></image>
	</view>
	</view>
	<view style="height: 80rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goDetail(){
				uni.navigateTo({
					url:'/src/pages/merchant_my/detail'
				})
			},
			goWithdraw(){
				uni.navigateTo({
					url:'/src/pages/merchant_my/withdraw'
				})
			},
			goOperate(){
				uni.navigateTo({
					url:'/src/pages/merchant_my/operate'
				})
			},
			goFeedBack(){
				uni.navigateTo({
					url:'/src/pages/merchant_my/feedback'
				})
			},
			goBills(){
				uni.navigateTo({
					url:'/src/pages/merchant_my/bills'
				})
			}
		}
	}
</script>
<style>
	page{
		background: #F2F3F8;
	}
</style>
<style lang="scss" scoped>
	
.count{
	background-color: white;
	margin: 20rpx;
	.count-top{
		border-radius: 12rpx 12rpx 0 0 ;
		margin-top: 20rpx;
		height: 100rpx;
		background-color: #FF8934;
	}
	.count-title{
		margin-left: 20rpx;
		color: #FFF;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 600;
		line-height: 40rpx; 
	}
	.count-rec{
		width: 124rpx;
		height: 48rpx;
		margin-right: 24rpx;
		border-radius: 24rpx;
		border: 2rpx solid #FFF;
		background: linear-gradient(270deg, rgba(248, 206, 148, 0.01) 0%, rgba(252, 223, 181, 0.01) 100%);
		color: #FFF;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx; /* 166.667% */
	}
	
	.count-item{
		padding: 30rpx 20rpx;
		background-color: white;
		border-radius: 12rpx 24rpx 0 0;
		.count-item-text{
			color:  #20252B;
			font-size: 48rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 48rpx; /* 100% */
		}
		.count-item-text2{
			color:  #FF8934;
			font-size: 48rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 48rpx; /* 100% */
		}
		.count-item-key{
			margin-top: 20rpx;
			color: #6A6876;
			font-size: 24rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx; /* 166.667% */
		}
		.count-price{
			margin-left: 10rpx;
			color: #3B60D3;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 700;
			line-height: 44rpx; /* 157.143% */
		}
	}
	
	.line{
		margin-top: 30rpx;
		height: 1rpx;
		background: #E6E6E6;
	}
	.cal-item{
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: 33%;
		height: 40rpx;
		border-right: 1rpx solid #E6E6E6;
	}
	.cal-item2{
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: 33%;
		height: 40rpx;
	}
	.cal-text{
		margin-right: 40rpx;
		color: #6A6876;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx; /* 166.667% */
	}
	.cal-arrow{
		width: 12rpx;
		height: 12rpx;
	}
	.cal-text2{
			margin-right: 40rpx;
		color: #3B60D3;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx; /* 166.667% */
	}
	
}	
	
.bg{
	background-image: url('/static/images/my_bg.png');
	background-size: 100% 100%;
	position: relative;
	width: 100%;
	height: 400rpx;
	padding-top: 120rpx;
	.info{
		.avater{
			margin-left: 40rpx;
		
			width: 108rpx;
			height: 108rpx;
		}
		.name{
			color: #1E2132;
			font-size: 40rpx;
			font-style: normal;
			font-weight: 500;
			line-height: 44rpx; /* 110% */
		}
		.mobile{
			color: #000;
			font-size: 20rpx;
			font-style: normal;
			font-weight: 400;
			line-height: 36rpx; /* 180% */
		}
		.mobile-img{
			width: 19rpx;
			height: 21rpx;
		}
	}
}

.manage{
	margin: 20rpx;
	.manage-item{
		background: white;
		width: 216rpx;
		height: 184rpx;
	}
	.manage-img{
		width: 80rpx;
		height: 80rpx;
	}
	.manage-text{
		color: #20252B;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx; /* 157.143% */
	}
}

.other{
	background-color: white;
	.other-item{
		height: 104rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}
	.other-item2{
		height: 104rpx;
	}
	.other-icon{
		width: 36rpx;
		height: 36rpx;
	}
	.other-text{
		margin-left: 22rpx;
		color:  #20252B;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: 44rpx; /* 157.143% */
	}
	.arrow{
		margin-right: 36rpx;
		width: 16rpx;
		height: 28rpx;
	}
}

</style>
